<template>
  <div class="card" :style="{ width: width }">
    <div class="top">
      <p class="time">2022.07.25</p>
      <p class="label">留言</p>
    </div>
    <p class="message">有种温馨来自于心灵中的惦记，有种快乐来自于思念中的回忆，有种关爱超越了世俗的轨迹，有种温暖放在心中像彩虹一样美丽！忙碌之中照顾好自我。</p>
    <div class="foot">
      <div class="foot-left">
        <div class="like">
          <span class="iconfont icon-xiai likeicon"></span>
          <span class="value">8</span>
        </div>
        <div class="common">
          <span class="iconfont icon-liuyan commonicon"></span>
          <span class="value">8</span>
        </div>

      </div>
      <div class="name">singjoeng</div>
    </div>

  </div>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
const props = defineProps({
  width: {
    default: '288px'
  }
})

</script>
<style lang="scss" scoped>
.card {
  height: 240px;
  background: rgba(252, 175, 162, 0.30);
  padding: 10px 20px 16px;
  box-sizing: border-box;

  .top {
    display: flex;
    justify-content: space-between;

    p {
      font-size: $size-12;
      color: $gray-2;
    }
  }

  .message {
    height: 140px;
    padding-top: 19px;
    font-size: $size-14;
    color: $gray-0;
    line-height: 22px;
    font-family: cursive;

  }

  .foot {
    display: flex;
    justify-content: space-between;

    .foot-left {
      display: flex;

      .value {
        padding-left: 5px;
      }

      .common {
        .commonicon {
          color: $gray-2;
        }
      }

      .like {
        margin-right: 11px;

        .likeicon {
          color: $gray-2;

          &:hover {
            color: $warning-color ;
          }
        }
      }
    }

    .name {
      font-size: $size-14;
      color: $gray-0;

      text-align: right;
      font-weight: 700;
    }
  }
}
</style>
